<template>
  <el-row class="reset-password-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form 
        ref="resetForm" 
        size="large" 
        :model="form" 
        :rules="rules"
        @submit.prevent="handleSubmit"
      >
        <el-form-item>
          <h1>重置密码</h1>
        </el-form-item>
        
        <!-- 新密码 -->
        <el-form-item prop="newPassword">
          <el-input
            v-model="form.newPassword"
            :prefix-icon="Lock"
            :type="newPasswordVisible ? 'text' : 'password'"
            placeholder="至少8位，包含字母、数字和符号"
            show-password
          >
            <template #suffix>
              <el-icon @click="toggleNewPasswordVisibility" class="cursor-pointer">
                <el-icon v-if="newPasswordVisible"><View /></el-icon>
                <el-icon v-else><Hide /></el-icon>
              </el-icon>
            </template>
          </el-input>
          <!-- 密码强度指示器 -->
          <div class="password-strength" v-if="form.newPassword">
            <div class="flex space-x-1 mb-1">
              <div 
                v-for="i in 4" 
                :key="i"
                :class="[
                  'h-1 w-1/4 rounded-full transition-all',
                  passwordStrength >= i ? strengthColors[i-1] : 'bg-gray-200'
                ]"
              ></div>
            </div>
            <p class="text-xs text-gray-500">
              {{ passwordStrengthText }}
            </p>
          </div>
        </el-form-item>

        <!-- 确认密码 -->
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            :prefix-icon="Lock"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            placeholder="请再次输入新密码"
            show-password
          >
            <template #suffix>
              <el-icon @click="toggleConfirmPasswordVisibility" class="cursor-pointer">
                <View v-if="confirmPasswordVisible" />
                <Hide v-else />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button 
            class="button" 
            type="primary" 
            native-type="submit"
            :loading="isLoading"
          >
            {{ isLoading ? '处理中...' : '重置密码' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 成功提示 -->
  <el-dialog
    v-model="successMessage"
    title="密码重置成功"
    width="30%"
    :show-close="false"
  >
    <span>您的密码已成功重置，请使用新密码登录。</span>
    <template #footer>
      <el-button type="primary" @click="resetForm">返回登录</el-button>
    </template>
  </el-dialog>

  <!-- 错误提示 -->
  <el-dialog
    v-model="errorMessage"
    title="重置失败"
    width="30%"
    :show-close="false"
  >
    <span>{{ errorMessage }}</span>
    <template #footer>
      <el-button type="primary" @click="clearError">重试</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Lock, View, Hide } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 表单数据
const form = ref({
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const rules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 8, message: '密码长度至少为8位', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (passwordStrength.value < 2) {
          callback(new Error('密码强度太弱，请包含字母、数字和符号'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value !== form.value.newPassword) {
          callback(new Error('两次输入的新密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 状态管理
const isLoading = ref(false)
const successMessage = ref(false)
const errorMessage = ref('')
const newPasswordVisible = ref(false)
const confirmPasswordVisible = ref(false)

// 密码强度相关
const passwordStrength = ref(0)
const passwordStrengthText = computed(() => {
  const texts = ['未输入', '弱', '中', '强', '非常强']
  return `密码强度：${texts[passwordStrength.value]}`
})
const strengthColors = ref(['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'])

// 密码强度检测
watch(() => form.value.newPassword, (val) => {
  let strength = 0
  if (val.length >= 8) strength++
  if (val.match(/[A-Z]/)) strength++
  if (val.match(/[0-9]/)) strength++
  if (val.match(/[^A-Za-z0-9]/)) strength++
  passwordStrength.value = strength
})

// 表单提交
const handleSubmit = async () => {
  try {
    isLoading.value = true
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    // 70%概率成功
    if (Math.random() > 0.3) {
      successMessage.value = true
    } else {
      errorMessage.value = '密码重置失败，请重试'
    }
  } finally {
    isLoading.value = false
  }
}

// 重置表单
const resetForm = () => {
  form.value = { newPassword: '', confirmPassword: '' }
  successMessage.value = false
}

// 清除错误
const clearError = () => {
  errorMessage.value = ''
}

// 切换密码可见性
const toggleNewPasswordVisibility = () => {
  newPasswordVisible.value = !newPasswordVisible.value
}

const toggleConfirmPasswordVisibility = () => {
  confirmPasswordVisible.value = !confirmPasswordVisible.value
}
</script>

<style lang="scss" scoped>
.reset-password-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url('@/assets/logo2.png') no-repeat 60%,
                url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .button {
      width: 100%;
    }

    .password-strength {
      margin-top: 8px;
    }
  }
}
</style>
